<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>

</head>
<body>
    <svg width="300" height="200">
    </svg>
</body>

<script>

    // 获取 svg
    var svg = d3.select('svg');

    //箭头
    var marker =
        svg.append("marker")
            .attr("id", "arrow")
            .attr("markerUnits","strokeWidth")//设置为strokeWidth箭头会随着线的粗细发生变化
            .attr("viewBox", "0 0 12 12")//坐标系的区域
            .attr("refX", 6)//箭头坐标
            .attr("refY", 6)
            .attr("markerWidth", 12)
            .attr("markerHeight", 12)
            .attr("orient", "auto")//绘制方向，可设定为：auto（自动确认方向）和 角度值
            .append("path")
            .attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2")//箭头的路径
            .attr('fill', '#f00');//箭头颜色

    // // 绘制直线
    // var line = svg.append("line")
    //     .attr("x1",50)
    //     .attr("y1",10)
    //     .attr("x2",200)
    //     .attr("y2",50)
    //     .attr("stroke","red")
    //     .attr("stroke-width",2)
    //     .attr("marker-end","url(#arrow)");

    // 绘制曲线
    var curve = svg.append("path")
        .attr("d","M20,70 T80,100 T160,80 T200,90")
        .attr("fill","white")
        .attr("stroke","blue")
        .attr("stroke-width",2)
        // .attr("marker-start","url(#arrow)")
        // .attr("marker-mid","url(#arrow)")
        .attr("marker-end","url(#arrow)");


</script>

</html>
